import React from 'react';
import './Say.css';
import moment from 'moment';
import { withRouter } from 'react-router-dom';
import { Toast } from 'antd-mobile';

class Say extends React.Component {  
    constructor(props){          
    super(props);        
    this.state = {
        //动态信息
        userid:this.props.userid,
        time:this.props.time,
        title:this.props.title,
        content:this.props.content,
        imgsrc:this.props.imgsrc,
        sayid:this.props.sayid, 
        commentnum:this.props.commentnum,
        likenum:this.props.likenum,
        //是否显示图片
        imgExist:this.props.imgsrc==null? 'none':'block',
        //获取用户是否点赞
        selectlike:''
    }  
  }  

    componentDidMount(){
        //获取用户的头像和昵称
        fetch(`https://www.prebeauty.work/user/${this.state.userid}`,{
        method:'GET',
        headers:{
            'content-type': 'application/json'
        }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        confimg:data[0].image,
                        nickname:data[0].name,
                    })
                })
            }else {
                alert("出现一个问题");
            }
        })

        //如果登陆则获取用户是否点赞
        if(localStorage.getItem('token')){
            fetch(`https://www.prebeauty.work/saylike/${this.state.userid}&${this.state.sayid}`, {
                method: 'GET',
                headers: {
                    'content-type': 'application/json'
                }
            }).then((res) => {
                if (res.status === 200) {
                    res.json().then((data) => {
                        this.setState({
                            selectlike: data[0] ? 'yes' : 'no'
                        })
                    })
            } else {
                console.log('erro')
            }
            })
        }
    }

    /*点赞,取消点赞*/
    changeLikeicon(){
        //点赞
        if(this.state.selectlike==='no'){  
            this.state.likenum++
            this.setState({
                selectlike:'yes',
            })
            Toast.success('已点赞',1);  
            //向点赞表中添加 
            const likeparam={
                userid:this.state.userid,
                sayid:this.state.sayid,
            }
            fetch('https://www.prebeauty.work/saylike', {
                method: 'POST',
                body: JSON.stringify(likeparam),
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then((res) => res.json() )
            .then((res) => {
                console.log(res);     
            })
             //向动态表中likenum+1
            const likenumParam={
                likenum:this.state.likenum
            }
            fetch(`https://www.prebeauty.work/saying/${this.state.sayid}`, {
                method: 'PUT',
                body: JSON.stringify(likenumParam),
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then((res) => res.json() )
            .then((res) => {
                console.log(res);
            })

        //取消点赞
        }else if(this.state.selectlike==='yes'){
            this.setState({
                selectlike:'no'
            })   
            this.state.likenum--
            Toast.fail('取消点赞',1);   
        //删除点赞表中的信息
        fetch(`https://www.prebeauty.work/saylike/${this.state.userid}&${this.state.sayid}`,{
            method:'DELETE',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('取消点赞！')
                })
            }else {
                console.log('erro')
            }
        })
        //动态表中的likesnum-1
        const likeparam={
            likenum:this.state.likenum
        }
        fetch(`https://www.prebeauty.work/saying/${this.state.sayid}`,{
            method:'PUT',
            body:JSON.stringify(likeparam),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('取消点赞！')
                })
            }else {
                console.log('erro')
            }
        })
        }
    }

    //跳转到详情页
    gotoSayDetail(){
        this.props.history.push('/SayDetail',{
            name:this.state.name,
            userid:this.state.userid,
            time: this.state.time,
            title: this.state.title,
            content: this.state.content,
            imgsrc: this.state.imgsrc,
            likenum: this.state.likenum,
            commentnum: this.state.commentnum,
            sayid: this.state.sayid,
            userid:this.state.userid,
        })
    }

  render() { 
    var time=this.state.time;
    var sayDate= moment(parseInt(time)).format('MM-DD HH:mm');
    if(this.state.imgsrc){
        var imgsrc_list = this.state.imgsrc.split(';')
    }

    return (
      <div className="Say">
          <div onClick={this.gotoSayDetail.bind(this)}>
            <img
                style={{width:'40px',height:'40px', borderRadius:20, marginTop:'10px',marginLeft:'5%',float:'left'}}
                src={this.state.confimg}	
                alt='.'
            />
            <p style={{float:'left',marginTop:'10px',marginLeft:'15px',marginBottom:'20px'}}>{this.state.nickname}</p><br/>
            <p className='say-time'>{sayDate}</p>
            <p className="say-content">{this.state.title}</p>
            <div className='say-pictures' style={{display:this.state.imgExist}}
            >
            { 
                (!imgsrc_list) ? null : imgsrc_list.map((item,index)=>{
                    return (
                        <img 
                            key={index}
                            src={'https://www.prebeauty.work'+item}	
                            alt='.'
                        />       
                    )
                })  
            }       
            </div>
            </div>
            <div className='say-tab'>
                <div>
                    <i className="iconfont icon-fenxiang" style={{color:'#236E3D',fontSize:'25px',position:'absolute',bottom:'9px',left:'8%'}}></i>
                    <p style={{left:'16%'}}>分享</p>
                </div>
                <div onClick={this.gotoSayDetail.bind(this)}>
                    <i className="iconfont icon-53pinglun-" style={{color:'#236E3D',fontSize:'20px',position:'absolute',bottom:'9px',left:'40%'}}></i>
                    <p style={{left:'48%'}}>{this.state.commentnum==0?'评论':this.state.commentnum}</p> 
                </div>
                <div>
                {
                    this.state.selectlike==='yes'
                    ? <i className="iconfont icon-w_aixin" 
                        style={{color:'#236E3D',fontSize:'25px',position:'absolute',bottom:'9px',left:'70%'}}
                        onClick={this.changeLikeicon.bind(this)}
                    ></i>
                    : <i className="iconfont icon-aixin" 
                        style={{color:'#236E3D',fontSize:'25px',position:'absolute',bottom:'9px',left:'70%'}}
                        onClick={localStorage.getItem('token') ? this.changeLikeicon.bind(this) : () => console.log('请先进行登录！')}
                    ></i>
                }
                    <p style={{left:'78%'}}>{this.state.likenum==0?'点赞':this.state.likenum}</p>
                </div> 
            </div>  
      </div>
    ) 
  }  
} 

export default withRouter(Say)